<template>
  <div>
    <el-container>
      <el-header></el-header>
      <el-container>
        <el-aside width="850px">
          <el-image :src="src"></el-image>
        </el-aside>
        <el-main
          ><el-form
            style="margin-top: 80px"
            :rules="rules"
            v-loading="loading"
            element-loading-text="正在登录中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            ref="LoginForm"
            :model="LoginForm"
            class="loginContainer"
          >
            <h3 class="Logintitle">家 政 服 务 平 台</h3>
            <el-form-item prop="email">
              <el-input
                type="text"
                v-model="LoginForm.email"
                auto-complete="false"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="LoginForm.password"
                show-password
                auto-complete="false"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-checkbox v-model="checked" class="LoginRemenber"
                    >记住我</el-checkbox
                  >
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple-light"><p></p></div
              ></el-col>
              <el-col :span="7"
                ><div class="grid-content bg-purple"><p></p></div
              ></el-col>
              <el-col :span="5"
                ><div class="grid-content bg-purple-light">
                  <el-link type="primary" @click="showupdataPassword = true"
                    >修改密码</el-link
                  >
                </div></el-col
              >
            </el-row>

            <el-dialog
              title="验证码"
              :visible.sync="dialogVisible"
              width="32%"
              :before-close="handleClose"
            >
              <el-form-item prop="code">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple">
                      <el-input
                        type="text"
                        v-model="LoginForm.code"
                        auto-complete="false"
                        placeholder="点击图片更换验证码"
                        style="width: 250px; margin-left: 20px"
                      ></el-input></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple">
                      <img
                        @click="showcode"
                        style="height: 40px; margin-left: -20px"
                        :src="captchaUrl"
                      /></div
                  ></el-col>
                </el-row>
              </el-form-item>
              <span slot="footer" class="dialog-footer">
                <el-button
                  type="primary"
                  @click="
                    dialogVisible = false;
                    submitLogin();
                  "
                  >登录</el-button
                >
              </span>
            </el-dialog>
            <el-button type="primary" style="width: 100%" @click="showcode"
              >登录</el-button
            >
            <el-button
              type="primary"
              style="width: 100%; margin: 15px 0 0 0"
              @click="identification"
              >人脸识别登录</el-button
            >
            <el-button
              type="primary"
              @click="toRegister"
              style="width: 100%; margin: 15px 0 0 0"
              >注册</el-button
            >
          </el-form>
          <el-dialog
            title="修改密码"
            :visible.sync="showupdataPassword"
            width="30%"
            :before-close="handleClose"
          >
            <el-form
              :inline="true"
              :rules="updataPasswordrules"
              ref="updataPasswordList"
              :model="updataPasswordList"
              size="small"
              label-width="140px"
            >
              <el-form-item prop="email">
                <el-input
                  type="text"
                  style="width: 370px"
                  v-model="updataPasswordList.email"
                  auto-complete="false"
                  placeholder="请输入邮箱"
                ></el-input>
              </el-form-item>

              <el-form-item prop="password">
                <el-input
                  type="password"
                  style="width: 370px"
                  v-model="updataPasswordList.password"
                  auto-complete="false"
                  placeholder="请输入新密码"
                ></el-input>
              </el-form-item>

              <el-form-item prop="repassword">
                <el-input
                  type="password"
                  style="width: 370px"
                  v-model="updataPasswordList.repassword"
                  auto-complete="false"
                  placeholder="请再次输入新密码"
                ></el-input>
              </el-form-item>

              <el-form-item prop="code">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple">
                      <el-input
                        type="text"
                        v-model="updataPasswordList.code"
                        auto-complete="false"
                        placeholder="点击按钮获取验证码"
                        style="width: 250px; margin-right: 5px"
                      ></el-input></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple">
                      <el-button
                        type="primary"
                        style="width: 103px"
                        @click="getCode"
                        >获取验证码</el-button
                      >
                    </div></el-col
                  >
                </el-row>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="showupdataPassword = false"
                    >返 回</el-button
                  >
                </span>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="updataPassword()"
                >修改</el-button
              >
            </span>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Cookie from "js-cookie";
export default {
  name: "Login",
  data() {
    return {
      src: require("../img/Home-making.jpg"),
      LoginForm: {
        email: "",
        password: "",
        code: "",
      },
      updataPasswordList: {},
      dialogVisible: false,
      loading: false,
      showupdataPassword: false,
      captchaUrl: "",
      checked: false,
      rules: {
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      updataPasswordrules: {
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        repassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
      },
      redirectUrl: null,
    };
  },
  created() {
    this.getCookie();
  },
  methods: {
    setCookie() {
      if (this.checked) {
        Cookie.set("loginRemmenber", "true");
        Cookie.set("loginEmail", this.LoginForm.email);
        Cookie.set("loginPassword", this.LoginForm.password);
      } else {
        Cookie.set("loginRemmenber", "");
        Cookie.set("loginEmail", "");
        Cookie.set("loginPassword", "");
      }
    },
    getCookie() {
      this.checked = Boolean(Cookie.get("loginRemmenber"));
      if (this.checked) {
        this.LoginForm.email = Cookie.get("loginEmail");
        this.LoginForm.password = Cookie.get("loginPassword");
      }
    },
    showcode() {
      this.$refs.LoginForm.validate((valid) => {
        if (valid) {
          this.axios
            .get("api/sso/codeImg?email=" + this.LoginForm.email)
            .then((response) => {
              if (response.data.code == 200) {
                this.dialogVisible = true;
                this.captchaUrl =
                  "data:image/png;base64," + response.data.value;
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("账号不正确");
            });
        } else {
          this.$message.error("请输入账号密码");
          return false;
        }
      });
    },
    submitLogin() {
      this.loading = true;
      let that = this;
      this.$refs.LoginForm.validate((valid) => {
        if (valid) {
          this.axios
            .post(
              "/api/sso/login?email=" +
                this.LoginForm.email +
                "&password=" +
                this.LoginForm.password +
                "&code=" +
                this.LoginForm.code
            )
            .then((response) => {
              if (response.data.code == "200") {
                this.$message({
                  message: "登录成功",
                  type: "success",
                });
                this.setCookie();
                Cookie.set("token", response.data.value.token);
                that.redirectUrl = response.data.value.redirectUrl;
                if (that.redirectUrl == "null" || that.redirectUrl == null) {
                  this.$router.push("/home");
                } else {
                  window.location.href = that.redirectUrl;
                }
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("登录失败");
            });
        } else {
          this.$message.error("请填写全部内容");
          return false;
        }
      });
      this.loading = false;
    },
    toRegister() {
      this.$router.push("/register");
    },
    updataPassword() {
      if(this.updataPasswordList.password != this.updataPasswordList.repassword){
        this.$message.error('两次密码输入不一致');
        return false;
      }
      this.$refs.updataPasswordList.validate((valid) => {
        if (valid) {
          this.axios
            .post(
              "api/sso/updatePassword?code=" +
                this.updataPasswordList.code +
                "&email=" +
                this.updataPasswordList.email +
                "&password=" +
                this.updataPasswordList.password
            )
            .then((response) => {
              if (response.data.code == 200) {
                this.$message.success('密码已成功修改');
                this.showupdataPassword = false;
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("注册失败");
            });
        } else {
          this.$message.error("请填写全部内容，并上传人脸照片");
          return false;
        }
      });
    },
    identification() {
      this.$router.push("/identification");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getCode() {
      if (this.updataPasswordList.email == "") {
        this.$message.error("请先填写邮箱");
      } else {
        this.axios
          .get("api/sso/sendEmailCode?email=" + this.updataPasswordList.email)
          .then((response) => {
            if (response.data.code == "200") {
              this.$message({
                message: "验证码已发送到您的邮箱中",
                type: "success",
              });
            } else {
              this.$message.error(response.data.message);
            }
          })
          .catch((error) => {
            this.$message.error("发送失败");
          });
      }
    },
  },
};
</script>

<style>
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: auto;
  width: 350px;
  padding: 15px 35px;
  background: #ffff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.Logintitle {
  margin: 0px auto 20px auto;
  text-align: center;
}
.LoginRemenber {
  text-align: left;
  margin: 0 0 15px 0;
}
</style>
